<template>
  <div class="content">
    <ul>
      <li v-for="v in list" :key="v.product_id">
        <div class="content-img">
          <img :src="v.product_img_url" />
        </div>
        <div class="content-text">
          <label>{{ v.product_name }}</label>
          <div class="content-info">
            <i>￥</i>
            <b>{{ v.product_price }}</b>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { getListData } from "../http/http";

const list = ref([]);
const res = await getListData();
list.value = res.data;
</script>

<style scoped>
.content {
  padding: 0 10px;
  width: 800px;
  margin: 0 auto;
}
.content ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.content ul li {
  flex: 0 1 49%;
  position: relative;
  border: 1px solid #999;
  margin: 10px 0;
}
.content .content-img {
  width: 50%;
  margin: 0 auto;
}
.content .content-img img {
  width: 100%;
}
.content-text {
  padding: 10px 20px;
}
.content-text label {
  font-weight: 400;
  padding: 10px 0;
}
.content-info {
  margin-bottom: 15px;
}
.content-info i {
  font-style: normal;
  font-size: 12px;
}
.content-info b {
  font: 400 16px arial;
  margin-left: -5px;
}
</style>
